@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
.clearFix:before,
.clearFix:after {
  display: table;
  content: '';
}
.clearFix:after {
  clear: both;
}
.clearFix {
  *zoom: 1;
}
em,
i {
  font-style: normal;
  font-weight: normal;
}
img {
  border: 0 none;
  vertical-align: top;
}
a,
a:hover,
a:active,
a:visited,
a:link,
a:focus {
  text-decoration: none;
  color: inherit;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
body {
  font-family: "Microsoft YaHei";
  font-size: 36px;
}
/** .slider {
	float: left;
	width: 300px;
	height: 100vh;
	border-right: 1px solid #ccc;
	text-align: center;
	padding-top: 50px;
} */
.align {
  position: absolute;
  left: 0;
  top: 150px;
  z-index: 99;
  width: 100%;
  height: 100%;
  text-align: center;
}
.v-enter {
  opacity: 0;
}
.v-enter-to {
  opacity: 1;
}
.v-enter-active {
  transition: 0.5s all ease-in-out;
  -webkit-transition: 0.5s all ease-in-out;
}
.v-leave {
  opacity: 1;
}
.v-leave-to {
  opacity: 0;
}
.v-leave-active {
  transition: 0.5s all ease-in-out;
  -webkit-transition: 0.5s all ease-in-out;
}
.left-enter {
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}
.left-enter-to {
  transform: translateX(0);
  -webkit-transform: translateX(0);
}
.left-enter-active,
.left-leave-active {
  transition: 1s all ease-in-out;
  -webkit-transition: 1s all ease-in-out;
}
.left-leave {
  transform: translateX(0);
  -webkit-transform: translateX(0);
}
.left-leave-to {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}
.right-enter {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}
.right-enter-to {
  transform: translateX(0);
  -webkit-transform: translateX(0);
}
.right-enter-active,
.right-leave-active {
  transition: 1s all ease-in-out;
  -webkit-transition: 1s all ease-in-out;
}
.right-leave {
  transform: translateX(0);
  -webkit-transform: translateX(0);
}
.right-leave-to {
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}
body {
  background-color: #f4f4f4;
}
.nav {
  width: 100%;
  background-color: #ccc;
}
.nav ul {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
.nav ul li {
  float: left;
  height: 100px;
  line-height: 100px;
  /** &.is-active {
				background-color: yellow!important;
			} */
}
.nav ul li a {
  float: left;
  padding: 0 50px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  /** &:hover {
					background-color: #fff;
				} */
}
.nav ul li.router-link-active {
  background-color: #fff;
}
.nav ul li.docClass {
  background-color: yellow;
}
.nav ul li.aboutClass {
  background-color: pink;
}
.nav ul li.userClass {
  background-color: #F99B15;
}
.myBtn input {
  display: inline-block;
  padding: 0 20px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  height: 42px;
  margin-right: 10px;
  outline: none;
  cursor: pointer;
}
#about ul,
#user ul {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  margin-top: 50px;
  background-color: #dcdcdc;
}
#about ul li,
#user ul li {
  float: left;
  height: 80px;
  line-height: 80px;
}
#about ul li a,
#user ul li a {
  float: left;
  padding: 0 50px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#about ul li.router-link-active,
#user ul li.router-link-active {
  background-color: gray;
}
#about .aboutAlign,
#user .aboutAlign {
  margin-top: 50px;
}
#user ul {
  background-color: #dbdbdb!important;
}
#user ul li.router-link-active {
  background-color: burlywood!important;
}
#user .userInfo p {
  font-size: 30px;
  line-height: 50px;
}
#user .infoCont {
  font-size: 20px;
  margin-top: 20px;
}
#user .infoCont a {
  padding: 0 10px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#user .infoCont a.router-link-active {
  background-color: yellowgreen!important;
}
#user .infoCont .infoShow {
  font-size: 20px;
  margin-top: 20px;
}
